<template>
    <div id="statistics">
        <div class="header-box">
            <div class="category-box"><span>首页 </span>&gt;<span>活动统计 </span>&gt; 活动报表</div>
            <div class="money-box">
                活动名称 : {{actName}} <span class="rest-money">(公众号)</span>
            </div>
            <div class="api-box">
                活动类型 : {{actType}}
            </div>
        </div>
        
        <div class="mini-charts" style="margin-top:15px;">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">活动数据</small>
                                <hr>
                                <small class="text-s1 ye f12" style="display:block;padding-top:10px;">新增参与次数</small>
                                <small class="text-s1 ye f12" style="display:block;padding-top:50px;">累计活动次数：{{dataTop['activity_record']['total'] || '0'}}</small>
                                <div class="big-num" style="left:14px;">{{dataTop['activity_record']['new'] || '0'}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">用户数据</small>
                                <hr>
                                <small class="text-s1 ye f12" style="display:block;padding-top:10px;">新增参与人数</small>
                                <small class="text-s1 ye f12" style="display:block;padding-top:50px;">累计活动次数：{{dataTop['activity_record_users']['total'] || '0'}}</small>
                                <div class="big-num" style="left:14px;">{{dataTop['activity_record_users']['new'] || '0'}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="mini-charts-item">
                        <div class="clearfix">
                            <div class="count abc">
                                <small class="text-s1">奖品数据</small>
                                <hr>
                                <small class="text-s1 ye f12" style="display:block;padding-top:10px;">成功兑奖人数</small>
                                <small class="text-s1 ye f12 dealbtn" style="display:block;padding-top:50px;">处理中奖信息</small>
                                <div class="big-num" style="left:14px;">{{dataTop['activity_is_change'] || '0'}}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <ul class="nav-tabs clearfix">
            <li class="pull-left list-item"
                :class="{'active': currentDataIndex === 0}"
                @click="chooseDataType(0)">
                <em class="dashboard-icon huodong01"></em>
                <span class="pl5">活动数据</span>
            </li>
            <li class="pull-left list-item"
                :class="{'active': currentDataIndex === 1}"
                @click="chooseDataType(1)">
                <em class="dashboard-icon yonghu02"></em>
                <span class="pl5">用户数据</span>
            </li>
            <li class="pull-left list-item ng-scope"
                :class="{'active': currentDataIndex === 2}"
                @click="chooseDataType(2)">
                <em class="dashboard-icon jiangpin04"></em>
                <span class="pl5">奖品数据</span>
            </li>
        </ul>
        <div class="statistics-content" v-if="currentDataIndex === 0">
            <div class="statistics-box">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <div class="chart-box pt100">
                             <div class="funnel-wap">
                                <div class="open">打开人数：{{dataTop['activity_record']['new'] || '0'}}</div>
                                <div class="partake">参与人数：{{dataTop['activity_record_users']['new'] || '0'}}</div>
                                <div class="share">分享人数：{{dataTop['activity_share']['new'] || '0'}}</div>
                                <div class="partake-conversion">
                                    <div>参与转化率</div>
                                    <div>{{joinRate}}%</div>
                                </div>
                                <div class="share-conversion">
                                    <div>分享转化率</div>
                                    <div>{{shareRate}}%</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="chart-box">
                            <bar :sevenDate='barData' :sevenDay='barDay'></bar>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="data-item clearfix">
                <div class="item col-md-4">
                    <div class="row list pt12">
                        <div class="col-md-6 text-right pr15">
                            <div class="number ng-binding">{{dataTop['activity_record']['new'] || '0'}}</div>
                            <div class="">打开人数</div>
                        </div>
                        <div class="col-md-6 text-left pl15 lh36 add">
                            <span class="nostyle" v-if="!dataTop['activity_record']['type']">-</span>
                            <span v-else :class="{'up': dataTop['activity_record']['type'] == 'up','down': dataTop['activity_record']['type'] == 'down'}">
                                <i class="fa trend-arrow"
                                   :class="{'fa-arrow-up': dataTop['activity_record']['type'] == 'up','fa-arrow-down': dataTop['activity_record']['type'] == 'down'}"></i>{{dataTop['activity_record']['trend']}}
                            </span> 
                        </div>
                    </div>
                </div>
                <div class="item col-md-4">
                    <div class="row list pt12">
                        <div class="col-md-6 text-right pr15">
                            <div class="number ng-binding">{{dataTop['activity_record_users']['new'] || '0'}}</div>
                            <div class="">参与人数</div>
                        </div>
                        <div class="col-md-6 text-left pl15 lh36 add">
                            <span class="nostyle" v-if="!dataTop['activity_record_users']['type']">-</span>
                            <span v-else :class="{'up': dataTop['activity_record_users']['type'] == 'up','down': dataTop['activity_record_users']['type'] == 'down'}">
                                <i class="fa trend-arrow"
                                   :class="{'fa-arrow-up': dataTop['activity_record_users']['type'] == 'up','fa-arrow-down': dataTop['activity_record_users']['type'] == 'down'}"></i>{{dataTop['activity_record_users']['trend']}}
                            </span> 
                        </div>
                    </div>
                </div>
                <div class="item col-md-4">
                    <div class="row list pt12">
                        <div class="col-md-6 text-right pr15">
                            <div class="number ng-binding">{{dataTop['activity_share']['new'] || '0'}}</div>
                            <div class="">分享人数</div>
                        </div>
                        <div class="col-md-6 text-left pl15 lh36 add">
                            <span class="nostyle" v-if="!dataTop['activity_share']['type']">-</span>
                            <span v-else :class="{'up': dataTop['activity_share']['type'] == 'up','down': dataTop['activity_share']['type'] == 'down'}">
                                <i class="fa trend-arrow"
                                   :class="{'fa-arrow-up': dataTop['activity_share']['type'] == 'up','fa-arrow-down': dataTop['activity_share']['type'] == 'down'}"></i>{{dataTop['activity_share']['trend']}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tool-box-1 clearfix">
                <el-date-picker
                  v-model="prizeNumDate"
                  type="daterange"
                  align="left"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <div class="downbtn pull-right">下载表格</div>
            </div>  
            <table class="table-style6">
                <thead>
                    <tr>
                        <td>日期</td>
                        <td>打开数</td>
                        <td>参与数</td>
                        <td>分享数</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ng-binding">{{today}}</td>
                        <td class="ng-binding">{{dataTop['activity_record']['new'] || '0'}}</td>
                        <td class="ng-binding">{{dataTop['activity_record_users']['new'] || '0'}}</td>
                        <td class="ng-binding">{{dataTop['activity_share']['new'] || '0'}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="statistics-content" v-if="currentDataIndex === 1">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="chart-box">
                       <pie></pie>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="chart-box">
                        <chinaMap></chinaMap>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="chart-box">
                        <table class="prince-table">
                            <thead class="bg-f1 color-333 tr-height50 f14">
                                <tr>
                                    <td style="width:60%;">
                                        <div class="dropdown-toggle">
                                            <div class="dropdown-item">
                                                <div>
                                                    <span>省</span>
                                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                            <ul class="dropdown-menu">
                                                <li class="text-center cursor-pointer">省</li>
                                                <li class="text-center cursor-pointer">市</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width:40%;" class="st-sort-descent">用户数</td>
                                </tr>
                            </thead>
                            <tbody class="tr-height36">
                                <tr class="ng-scope">
                                    <td class="ng-binding">四川</td>
                                    <td class="text-center ng-binding">1</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-col>
            </el-row>

            <div class="user-option clearfix">
                <div class="user-title pull-left">用户属性: </div>
                <ul class="pull-left nav-title clearfix">
                    <li :class="{'active': curUserIndex == 0}" @click="userClickEvent(0)">性别</li>
                    <li :class="{'active': curUserIndex == 1}" @click="userClickEvent(1)">省份</li>
                    <li :class="{'active': curUserIndex == 2}" @click="userClickEvent(2)">城市</li>
                </ul>
            </div>
            <table class="table-width100" v-show="curUserIndex===0">
                <thead>
                    <tr>
                        <td width="40%" class="text-center ng-binding">性别</td>
                        <td width="30%" class="text-center st-sort-descent">人数</td>
                        <td width="30%" class="text-center">比例</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>男性</td>
                        <td>1</td>
                        <td>100.00%</td>
                    </tr>
                </tbody>
            </table>
            <table class="table-width100" v-show="curUserIndex===1">
                <thead>
                    <tr>
                        <td width="40%" class="text-center ng-binding">省份</td>
                        <td width="30%" class="text-center st-sort-descent">人数</td>
                        <td width="30%" class="text-center">比例</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>四川</td>
                        <td>1</td>
                        <td>100.00%</td>
                    </tr>
                </tbody>
            </table>
            <table class="table-width100" v-show="curUserIndex===2">
                <thead>
                    <tr>
                        <td width="40%" class="text-center ng-binding">省份</td>
                        <td width="30%" class="text-center st-sort-descent">人数</td>
                        <td width="30%" class="text-center">比例</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>成都</td>
                        <td>1</td>
                        <td>100.00%</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="statistics-content" v-if="currentDataIndex === 2">
            <div class="win-msg">
                <div class="header clrerfix">
                    <div class="pull-left pl20">中奖信息</div>
                    <a class="pull-right mr20" >处理中奖信息</a>
                </div>
                <div class="prize-msg">
                    <ul class="clearfix">
                        <li class="col-md-3">
                            <div class="number pt15 ng-binding">{{activityPrize['fail'] || '0'}}</div>
                            <div class="pt5 f12">未中奖</div>
                        </li>
                        <li class="col-md-3">
                            <div class="number pt15 ng-binding">{{activityPrize['winning'] || '0'}}</div>
                            <div class="pt5 f12">未兑奖</div>
                        </li>
                        <li class="col-md-3">
                            <div class="number pt15 ng-binding">{{activityPrize['exchange'] || '0'}}</div>
                            <div class="pt5 f12">兑奖成功</div>
                        </li>
                        <li class="col-md-3">
                            <div class="number pt15 ng-binding">0</div>
                            <div class="pt5 f12">兑奖失败</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="headery">奖品消耗</div>
            <table class="prize-table">
                <thead>
                    <tr>
                        <td>奖品名称</td>
                        <td>添加总数</td>
                        <td>兑奖成功</td>
                        <td>兑奖失败</td>
                        <td>未兑奖</td>
                        <td>奖品剩余</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in prizeList">
                        <td>
                            <span class="pr5">{{item.name}}</span>
                        </td>
                        <td>{{item.stock_limit}}</td>
                        <td>{{item.exchange}}</td>
                        <td>0</td>
                        <td>{{item.winning}}</td>
                        <td>{{item.surplus}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
    </div>
</template>

<script>
    import bar from '../components/bar'
    import pie from '../components/pie'
    import chinaMap from '../components/map'
    import * as api from './../api/api'
    export default {
        data(){
            return {
                actName: '',
                actType: '',
                currentDataIndex: 0,
                curUserIndex: 0,
                today: '',
                barData: [],
                barDay: [],
                prizeNumDate: '2018-6-29',
                userOption: ['性别','省份','城市'],
                userOptionIndex: 0,
                dataTop: {
                    activity_record: '',
                    activity_record_users: '',
                    activity_is_change: '',
                    activity_share: ''
                },     //顶部数据
                activityPrize: {},
                prizeList: []
            }
        },
        components: {
            bar,
            pie,
            chinaMap
        },
        created(){
            var that = this;
            that.actName = localStorage.getItem('actName');
            that.actType = localStorage.getItem('actType');
            var act_id = that.$route.query.act_id;
            api.dashboardTop({
                activity_id: act_id,
                type: 1
            }).then(res => {
                var fetchData = res.data.data;
                if (fetchData.length < 1) {
                    that.barData.push(0);
                    that.barData.push(0);
                    that.barData.push(0);
                    return;
                }
                that.barData.push(fetchData.activity_record_users.new);
                that.barData.push(fetchData.activity_record.new);
                that.barData.push(Math.round(fetchData.activity_record.new/fetchData.activity_record_users.new));
                for (var key in fetchData) {
                    if (key === 'activity_is_change') continue;
                    var trend;
                    if (fetchData[key].before == 0 && fetchData[key].new != 0) {
                        trend = 100;
                    } else if (fetchData[key].before == 0 && fetchData[key].new == 0) {
                        trend = 0;
                    } else {
                        trend = Math.round((fetchData[key].new-fetchData[key].before*10000)/fetchData[key].before)/100;
                    }
                    
                    if (trend >= 0) {
                        fetchData[key]['type'] = 'up';
                    } else {
                        fetchData[key]['type'] = 'down';
                    }
                    fetchData[key]['trend'] = Math.abs(trend) + '%';
                }
                that.dataTop = fetchData;
            });
            api.dashboardTop({
                activity_id: act_id,
                type: 2
            }).then(res => {
                var fetchData = res.data.data;
                if (fetchData.length < 1) {
                    return;
                }
                that.activityPrize = fetchData.activity_prize;
                that.prizeList = fetchData.prize;
            })
        },
        mounted(){
            var that = this;
            that.today = that.formatDate(new Date);
            that.barDay.push(that.today);
        },
        computed: {
            joinRate(){
                var that = this;
                if (!that.dataTop['activity_record']['new']) {
                    return '0.00'
                } else {
                    return Math.round(that.dataTop['activity_record_users']['new']*10000/that.dataTop['activity_record']['new'])/100
                }
            },
            shareRate(){
                var that = this;
                if (!that.dataTop['activity_record_users']['new']) {
                    return '0.00'
                } else {
                    return Math.round(that.dataTop['activity_share']['new']*10000/that.dataTop['activity_record_users']['new'])/100
                }
            }
        },
        methods: {
            userClickEvent(index){
                var curIndex = this.curUserIndex;
                if (curIndex===index) return;
                this.curUserIndex = index;
            },
            chooseDataType (index){
                 var curIndex = this.currentDataIndex;
                 if (curIndex===index) return;
                 this.currentDataIndex = index;
            },
            formatDate(val){
                var date = new Date(val);
                var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
                var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                return date.getFullYear()  + "-" + month + '-' + day;
            }
        }
    }
</script>

<style lang="less" scoped>
    #statistics{
        background-color: #f4f8fb;
        width:100%;
        min-height: 100%;
        padding:20px 40px;
        box-sizing: border-box;
    }
    .header-box{
        height: 30px;
    }
    .category-box{
        color:#666666;
        font-size: 14px;
        float:left;
        padding-right:104px;
        border-right: 1px solid #e8e8e8;
    }
    .category-box span{
        color:#1b2b38;
    }
    .money-box{
        float:left;
        color:#666666;
        font-size: 14px;
        padding:0 47px;
        border-right:1px solid #e8e8e8;
    }
    .fa-jpy{
        position: relative;
    }
    .mic{
        font-size: 12px;
        color: #ff5a08;
        transform:scale(0.7);
    }
    .chongqian{
        background: #169bd5;
        color:#ffffff;
        border-color:#169bd5;
        margin-left:5px;
        font-size: 13px;
        padding:2px 15px 3px;
        margin-left: 10px;
        cursor: pointer;
    }
    .rest-money{
        color:#999999;
    }
    .api-box{
        padding-left:47px;
        color:#666666;
        font-size: 14px;
        float: left;
    }
    .fa-server{
        color:#2db7f5;
        margin-right: 6px;
    }
    .rest-num{
        color:#2db7f5;
        margin: 0 8px;
    }
    .add-num{
        color:#2db7f5;
        margin-left: 18px;
        cursor:pointer;
    }
    .pt25 {
        padding-top: 25px;
    }
    .mini-charts-item {
        position: relative;
        margin-bottom: 30px;
        background-color: #ffffff;
    }
    .mini-charts-item:before {
        -webkit-transition: width;
        -o-transition: width;
        transition: width;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        content: "";
        width: 105px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .mini-charts-item .chart {
        padding: 19px;
        float: left;
    }
    .mini-charts-item .count {
        overflow: hidden;
        color: rgba(255,255,255,.9);
        padding: 16px 12px;
    }
    .mini-charts-item .count>small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-charts-item .count>h2, .mini-charts-item .count>small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-charts-item .count>h2 {
        margin: 0;
        line-height: 100%;
        font-size: 22px;
        font-weight: 300;
    }
    .mini-charts-item {
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .pl40 {
        padding-left: 40px;
    }
    .abc{
        position:relative;
    }
    .text-s1{
        line-height: 1.2;
        font-size: 14px;
        color:#333333;
    }
    .f12{
        font-size: 12px;
    }
    hr{
        margin-top:10px;
        height: 1px;
        border:none;
        border-top:1px solid #e8e8e8;
    }
    .text-s2{
        line-height: 1.2;
        font-size: 14px;
        display: block;
        margin-bottom:50px;
    }
    .big-num{
        font-size: 32px;
        position: absolute;
        bottom:46px;
        right:40px;
        color:#333333;
        text-align:right;
    }
    .ye{
        color:#888888;
    }
    .info-box{
        display: inline-block;
        margin-left: 60px;
    }
    .info-box span{
        padding:0 40px;
        border-left:1px solid #333333;
    }
    .dealbtn{
        color: #ec4453;
    }
    .dealbtn:hover{
        text-decoration: underline;
        cursor: pointer;
    }
    .chartbox1{
        padding:30px;
        height: 500px;
    }
    .chartboxitem{
        float: left;
        width:50%;
        height: 100%;
    }
    #trendbox1{
        height: 80px;
        margin: 30px 0;
        position: relative;
    }
    .trend-item{
        height: 100%;
        background: #2b343a;
        color:#ffffff;
        float:left;
        width:32.6%;
        position: relative;
    }
    #trendbox1 .trend-item:nth-child(2){
        float:none;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
    #trendbox1 .trend-item:last-child{
        float:right;
    }
    .trend-item:before{
        content:'';
        width:1px;
        height: 80%;
        background: #ffffff;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
    .trend-left{
        width:50%;
        float:left;
        text-align: right;
        box-sizing: border-box;
        padding-right:3%;
    }
    .trend-left p{
        font-weight: bold;
        line-height:2.4;
    }
    .trend-right{
        width:50%;
        float:left;
        line-height: 80px;
        box-sizing: border-box;
        padding-left: 5%;
        font-weight: bold;
    }
    .up{
        color:#87d068;
    }
    .down{
        color:red;
    }
    .trend-arrow{
        font-size: 13px;
        margin-right:3px;
        margin-left: 2px;
    }
    .title-header{
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 3.5;
        border-radius: 1px;
        text-indent: 14px;
        background: #ffffff;
        position: relative;
    }
    .title-header span{
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        right:30px;
    }
    .el-date-editor--daterange.el-input {
        width: 280px;
    }
    .nav-pills li{
        cursor:pointer;
    }
    .swiper-box{
        float:left;
        width:33.33%;
    }
    .card{
        overflow: hidden;
    }
    .charts-box:after{
        content:'';
        display: block;
        clear:both;
        height: 0;
    }
    .charts-item-box{
        background: #ffffff;
        padding:0 18px;
        box-sizing: border-box;
        width:48%;
        height: 336px;
        margin-bottom: 10px;
    }
    .charts-item-box .el-date-editor--daterange.el-input {
        width: 220px;
    }
    .charts-item-box-left{
        float:left;
    }
    .charts-item-box-right{
        float:right;
    }
    .charts-title-header{
        font-size: 14px;
        color:#333333;
        height: 54px;
        line-height: 54px;
        position: relative;
    }
    .charts-title-header span{
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        right:-2px;
    }
    .echart-box{
        height: 250px;
    }
    .nav-tabs{
        font-size: 14px;
        text-align: center;
    }
    .pull-left {
        float: left!important;
    }
    .pull-right {
        float: right!important;
    }
    .clearfix:after {
        display: block;
        content: "";
        visibility: hidden;
        height: 0;
        clear: both;
    }
    .list-item{
        margin-bottom: -1px;
        color: #888;
        width: 140px;
        padding: 15px;
        height: 48px;
        border-radius: 4px 4px 0 0;
    }
    .list-item:not(.active):hover{
        cursor: pointer;
        background: #f1f1f1;
    }
    .list-item.active{
        border-bottom: 1px solid #fff;
        color: #fb6e52;
        background-color: #fff;
        cursor: default;
    }
    .dashboard-icon {
        background-size: 32px 75px;
        width:14px;
        height:14px;
        display: inline-block;
        background-repeat: no-repeat;
        overflow: hidden;
        background-image: url('../assets/img/dashboard_nav.png');
    }
    .huodong01 {
        background-position: -1px -16px;
    }
    .active .huodong01 {
        background-position: -16px -16px;
    }
    .yonghu02 {
        background-position: -1px -1px;
    }
    .active .yonghu02 {
        background-position: -16px -1px;
    }
    .jiangpin04 {
        background-position: -1px -31px;
    }
    .active .jiangpin04 {
        background-position: -16px -31px;
    }
    .statistics-content{
        background: #ffffff;
        padding:20px;
    }
    .chart-box{
        height:310px;
    }
    .data-item{
        width: 100%;
        height: 60px;
        border: 1px solid #ddd;
        margin-top: 20px;
    }
    .col-md-4 {
        width: 33.33333%;
        float: left;
    }
    .col-md-6 {
        width: 50%;
        float: left;
    }
    .pt12 {
        padding-top: 12px;
    }
    .pr15 {
        padding-right: 15px;
    }
    .pl15{
        padding-left: 15px;
    }
    .add {
        color: #82e4a5;
    }
    .lh36 {
        line-height: 36px;
    }
    .list .col-md-6:first-child {
        border-right: 1px dashed #ddd;
    }
    .number {
        font-size: 16px;
        font-weight: bold;
        color: #666;
    }
    .data-item .item{
        height: 60px;
        color: #888;
        font-size: 12px;
    }
    .data-item .item:not(:last-child){
        border-right: 1px solid #ddd;
    }
    .up{
        color:#87d068;
    }
    .down{
        color:red;
    }
    .trend-arrow{
        font-size: 13px;
        margin-right:3px;
        margin-left: 2px;
    }
    .tool-box-1{
        padding-top: 30px;
        position: relative;
    }
    .downbtn{
        width: 90px;
        padding: 0;
        border-radius: 13px;
        background-color: #ec5463;
        color: #fff;
        font-size: 12px;
        border: 0;
        height: 26px;
        line-height: 26px;
        margin-top: 10px;
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
    }
    .table-style6 {
        width: 100%;
        border: 1px solid #ddd;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
        margin-top:20px;
    }
    .table-style6 thead tr {
        background-color: #f7f8fa;
    }
    .table-style6 tr {
        border-bottom: 1px solid #ddd;
    }
    .table-style6 thead tr td {
        height: 40px;
        width: 25%;
    }
    .table-style6 tbody tr td {
        font-size: 12px;
        color: #888;
    }
    .table-style6 tr td {
        height: 60px;
    }
    .prince-table{
        border: 1px solid #efefef;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
    }
    .prince-table thead{
        color: #333;
        background-color: #f1f1f1;
    }
    .prince-table thead tr{
        height: 50px;
    }
    .prince-table tbody tr{
        height: 36px;
    }
    .dropdown-toggle{
        position: relative;
    }
    .dropdown-menu{
        width: 120px;
        height: auto;
        left: 0;
        top: 0;
        background-color: #f4f8fb;
        min-width: 120px!important;
        border: 1px solid #efefef;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
        color: #888;
        line-height: 40px;
        font-size: 12px;
        position: absolute;
        display: none;
        z-index: 1000;
    }
    .dropdown-menu li{
        height: 43px;
        cursor: pointer;
        color: #888;
    }
    .user-option{
        margin-top: 50px;
    }
    .user-title{
        line-height: 48px;
    }
    .nav-title{
        padding-left: 50px;
    }
    .nav-title li:not(.active){
        cursor: pointer;
    }
    .nav-title li {
        float: left;
        color: #888;
        width: 138px;
        font-size: 14px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 4px 4px 0 0;
    }
    .nav-title li.active{
        color: #333;
        background-color: #f1f1f1;
        cursor: default;
    }
    .table-width100{
        border: 1px solid #efefef;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
    }
    .table-width100 thead{
        color: #333;
        background-color: #f1f1f1;
        text-align: center;
    }
    .table-width100 tr{
        height: 50px;
    }
    .win-msg{
        border: 1px solid #ddd;
        font-size: 14px;
    }
    .win-msg .header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #fbfbfb;
        border-bottom: 1px solid #ddd;
    }
    a {
        color: #ec5463;
        text-decoration: none;
    }
    .pl20{
        padding-left: 20px;
    }
    .mr20{
        margin-right: 20px;
    }
    .prize-msg {
        padding-top: 26px;
        padding-bottom: 26px;
    }
    .prize-msg ul>li {
        text-align: center;
        height: 80px;
        border-right: 1px solid #ddd;
        vertical-align: middle;
        color: #888;
        box-sizing: border-box;
        float: left;
        width: 25%;
    }
    .prize-msg ul>li:last-child{
        border:none;
    }
    .prize-msg ul>li .number {
        font-size: 20px;
        font-weight: 700;
        color: #666;
        padding-top: 15px;
    }
    .pt5{
        padding-top: 5px;
    }
    .headery{
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }
    .prize-table{
        width: 100%;
        height: auto;
        border: 1px solid #ddd;
        margin-top: 20px;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
        text-align: center;
    }
    .prize-table thead tr {
        background-color: #f7f8fa;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }
    .prize-table thead tr td {
        height: 40px;
        width: 16%;
        text-align: center;
    }
    .prize-table tbody {
        color: #888;
        font-size: 12px;
    }
    .prize-table tr {
        border-bottom: 1px solid #ddd;
    }
    .prize-table tbody tr:last-child {
        border: 0;
    }
    .prize-table tbody td{
        height: 50px;
    }
    .funnel-wap{
        width: 480px;
        height: 210px;
        position: relative;
        background: url('../assets/img/funnel02.png') left top no-repeat;
        background-size: 366px 151px;
        margin: 0 auto;
    }
    .pt100{
        padding-top:100px;
        box-sizing: border-box;
    }
    .funnel-wap .open {
        padding-left: 185px;
        padding-top: 16px;
        color: #18d6c3;
    }
    .funnel-wap .partake {
        padding-left: 165px;
        padding-top: 33px;
        color: #51e792;
    }
    .funnel-wap .share {
        padding-left: 145px;
        padding-top: 32px;
        color: #c9ee51;
    }
    .partake-conversion {
        left: 375px;
        top: 43px;
        width: 70px;
        height: 40px;
        position: absolute;
        font-size: 12px;
        color: #888;
    }
    .share-conversion {
        left: 358px;
        top: 107px;
        width: 70px;
        height: 40px;
        position: absolute;
        font-size: 12px;
        color: #888;
    }
    .nostyle{
        font-size: 30px;
        color: #aaaaaa;
    }
</style>
